import { lazy } from 'react'
import { IRoute } from 'src/types/route'
import { Redirect } from 'react-router-dom'
import { NOT_LOGIN } from 'src/enums/permissionEnum'
import withAuth from 'src/routes/withPermission'

// Content pages
const Home = lazy(() => import('src/pages/home'))
const Admin = lazy(() => import('src/pages/admin'))
const AdminId = lazy(() => import('src/pages/admin/_id'))
// Authentication related pages
const Login = lazy(() => import('src/pages/login'))
const Register = lazy(() => import('src/pages/register'))

// Error pages
const Error404 = lazy(() => import('src/pages/404'))

const toError404 = {
    path: '*',
    component: () => <Redirect to="/404" />
}

const authProtectedRoutes: IRoute[] = [
    {
        path: '/',
        component: withAuth(Home),
        name: 'home',
        isProtected: true,
        exact: true
    },
    toError404
]

const publicRoutes: IRoute[] = [
    {
        path: '/login',
        component: withAuth(Login),
        name: 'login',
        auth: [NOT_LOGIN]
    },
    {
        path: '/register',
        component: withAuth(Register),
        name: 'register'
    },
    {
        path: '/404',
        component: withAuth(Error404),
        name: '404'
    }
]

const routes = [...publicRoutes, ...authProtectedRoutes]

export { authProtectedRoutes, publicRoutes }

export default routes
